const initBg = (autoplay = true) => {
    const bgImgsNames = ['diagoona-bg-1.jpg', 'diagoona-bg-2.jpg', 'diagoona-bg-3.jpg', 'diagoona-bg-4.jpg', 'diagoona-bg-5.jpg', 'diagoona-bg-6.jpg', 'diagoona-bg-7.jpg', 'diagoona-bg-8.jpg'];
    shuffleArray(bgImgsNames);
    const bgImgs = bgImgsNames.map(img => "img/" + img);

    $.backstretch(bgImgs, {duration: 4000, fade: 500});

    if (!autoplay) {
        $.backstretch('pause');
    }
}

const setBg = id => {
    $.backstretch('show', id);
}

const setBgOverlay = () => {
    const windowWidth = window.innerWidth;
    const bgHeight = $('body').height();
    const tmBgLeft = $('.tm-bg-left');

    $('.tm-bg').height(bgHeight);

    if (windowWidth > 768) {
        tmBgLeft.css('border-left', `0`)
            .css('border-top', `${bgHeight}px solid transparent`);
    } else {
        tmBgLeft.css('border-left', `${windowWidth}px solid transparent`)
            .css('border-top', `0`);
    }
}

const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // 交换元素位置
    }
}

$(document).ready(function () {
    const autoplayBg = true;	// set Auto Play for Background Images
    initBg(autoplayBg);
    setBgOverlay();

    const bgControl = $('.tm-bg-control');
    bgControl.click(function () {
        bgControl.removeClass('active');
        $(this).addClass('active');
        const id = $(this).data('id');
        setBg(id);
    });

    $(window).on("backstretch.after", function (e, instance, index) {
        const bgControl = $('.tm-bg-control');
        bgControl.removeClass('active');
        const current = $(".tm-bg-controls-wrapper").find(`[data-id=${index}]`);
        current.addClass('active');
    });

    $('.tm-col-right .tm-col-go-img').on("click",function () {
        $(".tm-col-right .tm-content").css({'display':'none'});
        let pos = $('.tm-col-right .tm-col-go-img').index(this);
        let index =$('.tm-content-page.active').data('id');
        const $bgControl = $('.tm-content-page');
        $bgControl.removeClass('active');
        if(pos==0){//左边
            if(index==0){
                index =$bgControl.length-1;
            }else{
                index--;
            }
        }else{//右边
            if(index==$bgControl.length-1){
                index =0;
            }else{
                index++;
            }
        }
        $('.tm-content-page').eq(index).addClass('active');
        $(".tm-col-right .tm-content").eq(index).fadeIn(1500);
    });

    $('.tm-content-page').on("click",function () {
        $(".tm-col-right .tm-content").css({'display':'none'});
        let index =$(this).data('id');
        $('.tm-content-page').removeClass('active');
        $('.tm-content-page').eq(index).addClass('active');
        $(".tm-col-right .tm-content").eq(index).fadeIn(1500);
    });
    $(window).resize(function () {
        setBgOverlay();
    });
});
